<template>
  <div>
    <div class="absolute right-20 z-[99999999999999999999] bottom-80 text-lg flex gap-4 items-center">
      <span>隐藏所有数据</span>
      <el-switch v-model="isShowData" size="large" />
    </div>
    <div v-show="isShowData">
      <!-- <div class="w-[160px] absolute z-50 top-[400px] left-[2160px] cflex">
        <img :src="Box" class="w-full h-full" />
        <span class="absolute text-[12px] bottom-4">SSP火情：无火情</span>
      </div>
      <div class="w-[160px] absolute z-50 top-[400px] left-[1240px] cflex">
        <img :src="Box" class="w-full h-full" />
        <span class="absolute text-[12px] bottom-4">R1火情：无火情</span>
      </div>
      <div class="w-[160px] absolute z-50 top-[400px] left-[80px] cflex">
        <img :src="Box" class="w-full h-full" />
        <span class="absolute text-[12px] bottom-4">R2火情：无火情</span>
      </div> -->

      <!-- <div class="h-[60px] absolute z-50 top-[500px] left-[2380px] cflex text-[12px]">
        <img :src="Box8" class="w-full h-full" />
        <div class="flex items-center gap-3 absolute left-2 ml-16">
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">XXXX</span>
            <span>出炉温度</span>
          </div>
        </div>
      </div> -->

      <div class="h-[60px] absolute z-50 top-[520px] left-[2280px] cflex text-[12px]">
        <img :src="Box9" class="w-full h-full" />
        <div class="flex items-center gap-3 absolute left-2 ml-16">
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/FMC/FSB/DES/FSBDescMode_1') }}</span>
            <span>除磷模式1</span>
          </div>
        </div>
      </div>

      <div class="h-[60px] absolute z-50 top-[600px] left-[2280px] cflex text-[12px]">
        <img :src="Box9" class="w-full h-full" />
        <div class="flex items-center gap-3 absolute left-2 ml-16">
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/FMC/FSB/DES/FSBDescMode_2') }}</span>
            <span>除磷模式2</span>
          </div>
        </div>
      </div>

      <div class="h-[60px] w-[220px] absolute z-50 top-[590px] left-[1950px] cflex text-[12px]">
        <img :src="Box5" class="w-full h-full" />
        <div class="flex items-center gap-3 absolute left-2 ml-16">
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/RMC/SSP/HDR/Ent/LCRF_DS_Fbk') }}</span>
            <span>入口轧制力</span>
          </div>
          <img :src="Line" class="w-[1px]" />
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/RMC/SSP/HDR/Ext/LCRF_DS_Fbk') }}</span>
            <span>出口轧制力</span>
          </div>
        </div>
      </div>

      <!-- R1 -->
      <div class="h-[60px] absolute z-50 top-[420px] left-[1680px] cflex text-[12px]">
        <img :src="Box7" class="w-full h-full" />
        <div class="flex items-center gap-3 absolute left-2 ml-16">
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/RMC/R1/MOT/Cur_Top_Fbk') }}</span>
            <span>电流上</span>
          </div>
          <img :src="Line" class="w-[1px]" />
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/RMC/R1/MOT/Cur_Bot_Fbk') }}</span>
            <span>电流下</span>
          </div>
        </div>
      </div>
      <div class="h-[60px] absolute z-50 top-[490px] left-[1680px] cflex text-[12px]">
        <img :src="Box6" class="w-full h-full" />
        <div class="flex items-center gap-3 absolute left-2 ml-16">
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/RMC/R1/MOT/Speed_Top_Fbk') }}</span>
            <span>速度上</span>
          </div>
          <img :src="Line" class="w-[1px]" />
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/RMC/R1/MOT/Speed_Bot_Fbk') }}</span>
            <span>速度下</span>
          </div>
        </div>
      </div>
      <div class="h-[60px] absolute z-50 top-[560px] left-[1680px] cflex text-[12px]">
        <img :src="Box10" class="w-full h-full" />
        <div class="flex items-center gap-3 absolute left-2 ml-16">
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/RMC/R1/SDS/RF_Act') }}</span>
            <span>轧制力</span>
          </div>
        </div>
      </div>

            <div class="h-[60px] absolute z-50 top-[630px] left-[1680px] cflex text-[12px]">
        <img :src="Box11" class="w-full h-full" />
        <div class="flex items-center gap-3 absolute left-2 ml-16">
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/RMC/L2/PreCalc/SSP/WidthRdu') }}</span>
            <span>宽度压下量</span>
          </div>
        </div>
      </div>

      <!-- R2 -->
      <div class="h-[60px] absolute z-50 top-[450px] left-[160px] cflex text-[12px]">
        <img :src="Box7" class="w-full h-full" />
        <div class="flex items-center gap-3 absolute left-2 ml-16">
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/RMC/R2/MOT/Cur_Top_Fbk') }}</span>
            <span>电流上</span>
          </div>
          <img :src="Line" class="w-[1px]" />
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/RMC/R2/MOT/Cur_Bot_Fbk') }}</span>
            <span>电流下</span>
          </div>
        </div>
      </div>

      <div class="h-[60px] absolute z-50 top-[520px] left-[160px] cflex text-[12px]">
        <img :src="Box6" class="w-full h-full" />
        <div class="flex items-center gap-3 absolute left-2 ml-16">
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/RMC/R2/MOT/Speed_Top_Fbk') }}</span>
            <span>速度上</span>
          </div>
          <img :src="Line" class="w-[1px]" />
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/RMC/R2/MOT/Speed_Bot_Fbk') }}</span>
            <span>速度下</span>
          </div>
        </div>
      </div>

      <div class="h-[60px] absolute z-50 top-[590px] left-[160px] cflex text-[12px]">
        <img :src="Box10" class="w-full h-full" />
        <div class="flex items-center gap-3 absolute left-2 ml-16">
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/RMC/R2/SDS/RF_Act') }}</span>
            <span>轧制力</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- <div class="h-[60px] absolute z-50 top-[290px] left-[2020px] cflex text-[12px]">
      <img :src="Box11" class="w-full h-full" />
      <div class="flex items-center gap-3 absolute left-2 ml-16">
        <div class="flex flex-col items-center">
          <span class="gradient-text fzxbs">XXXX</span>
          <span>除磷模式</span>
        </div>
        <img :src="Line" class="w-[1px]" />
        <div class="flex flex-col items-center">
          <span class="gradient-text fzxbs">XXXX</span>
          <span>辊道模式</span>
        </div>
      </div>
    </div>
    <div class="h-[60px] absolute z-50 top-[290px] left-[1620px] cflex text-[12px]">
      <img :src="Box5" class="w-full h-full" />
      <div class="flex items-center gap-3 absolute left-2 ml-16">
        <div class="flex flex-col items-center">
          <span class="gradient-text fzxbs">XXXX</span>
          <span>绝缘值</span>
        </div>
      </div>
    </div>
    <div class="h-[60px] absolute z-50 top-[590px] left-[120px] cflex text-[12px]">
      <img :src="Box2" class="w-full h-full" />
      <div class="flex items-center gap-3 absolute left-2 ml-16">
        <div class="flex flex-col items-center">
          <span class="gradient-text fzxbs">XXXX</span>
          <span>中间温度A</span>
        </div>
        <img :src="Line" class="w-[1px]" />
        <div class="flex flex-col items-center">
          <span class="gradient-text fzxbs">XXXX</span>
          <span>中间温度B</span>
        </div>
      </div>
    </div> -->
</template>

<script setup>
import Box from '@/assets/imgs/box.png'
import Box5 from '@/assets/imgs/box_zz.png'
import Box6 from '@/assets/imgs/box_sd.png'
import Box7 from '@/assets/imgs/box_dl.png'
import Box9 from '@/assets/imgs/box_chulin.png'
import Box10 from '@/assets/imgs/box_zz2.png'
import Box11 from '@/assets/imgs/box_cl.png'
import Line from '@/assets/imgs/line.png'
import { getL1Data } from '@/api/api'

const isShowData = ref(true)

const dataMap = ref({})

const fetchData = async () => {
  try {
    const res = await getL1Data()
    const map = {}
    if (res && Array.isArray(res.data)) {
      for (const item of res.data) {
        map[item.asset_alias] = item.value
      }
    }
    dataMap.value = map
  } catch (e) {
    console.error('getL1Data error:', e)
  }
}

let timer = null
onMounted(() => {
  fetchData()
  timer = setInterval(fetchData, 10000)
})
onUnmounted(() => {
  if (timer) clearInterval(timer)
})

const vRaw = (alias) => dataMap.value[alias]

const formatNumber = (v) => {
  if (v === null || v === undefined) return '--'
  const n = Number(v)
  if (!Number.isFinite(n)) return '--'
  return Number.isInteger(n) ? String(n) : n.toFixed(1)
}

const vf = (alias) => formatNumber(vRaw(alias))
</script>

<style lang="scss" scoped>
.gradient-text {
  background: linear-gradient(to bottom, #dce0ff, #06fcff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* 兼容 Firefox */
  background-clip: text;
  color: transparent;
}
</style>
